<template>
  <div class="item">
    <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft"/>
    <van-search v-model="input"
                placeholder="请输入商品条码或拼音助记码"
                @input="onInput"
                shape="round"
                background="#4fc08d"/>
    <div class="detail">
      <div class="list" v-for="(item,index) in list(input,type)" :key="index">
        <van-collapse v-model="activeNames">
          <van-collapse-item :name="index">
            <template #title>
              <div>
                品名:{{item.itemValue.goodsname}},
                条码:{{item.itemValue.barcode}}
              </div>
              <div>
                <strong>
                  补货量:{{Number(item.itemValue.asknum).toFixed(1)}},
                  库存数量:{{Number(item.itemValue.stocknum).toFixed(1)}}
                  库存件数:{{Number(item.itemValue.pack).toFixed(1)}}
                </strong>
              </div>
              <div v-if="item.inputValue.buymoney">
                <strong>
                  采购数量:{{Number(item.inputValue.buynum).toFixed(1)}},
                  进货件数:{{Number(item.inputValue.buyspec).toFixed(1)}}
                  采购金额:{{Number(item.inputValue.buymoney).toFixed(1)}}
                </strong>
              </div>
            </template>
            <div class="wrapper" @click="onGo(item.itemValue.barcode)">
              <div>
                <span>品名:{{item.itemValue.goodsname}}</span>
              </div>
              <div>
                <span>条码:{{item.itemValue.barcode}}</span>,
              </div>
              <div>
                <span>要货数量:{{Number(item.itemValue.asknum).toFixed(1)}}</span>,
                <span>库存数量:{{Number(item.itemValue.stocknum).toFixed(1)}}</span>,
                <span>件数:{{Number(item.itemValue.pack).toFixed(1)}}</span>
              </div>
              <div>
                <span>最新进价:{{Number(item.itemValue.lastbuyprice).toFixed(1)}}</span>,
                <span>零售价:{{Number(item.itemValue.retailprice).toFixed(1)}}</span>,
                <span>规格:{{item.itemValue.spec?item.itemValue.spec:'无'}}</span>
              </div>
              <div class="inputValue" v-if="item.inputValue.buymoney">
                <div>
                  <span>进货件数:{{Number(item.inputValue.buyspec).toFixed(1)}}</span>,
                  <span>进货数量:{{Number(item.inputValue.buynum).toFixed(1)}}</span>,
                  <span>进货金额:{{Number(item.inputValue.buymoney).toFixed(1)}}</span>,
                </div>
                <div>
                  <span>皮重:{{Number(item.inputValue.taxrate).toFixed(1)}}</span>,
                  <span>进价:{{Number(item.inputValue.buyprice).toFixed(1)}}</span>,
                  <span>配送价:{{Number(item.inputValue.admprice).toFixed(1)}}</span>
                </div>
                <div>
                  <span>零售价:{{Number(item.inputValue.retailprice).toFixed(1)}}</span>,
                  <span>框子单价:{{Number(item.inputValue.kzprice).toFixed(1)}}</span>,
                  <span>是否标品:{{item.inputValue.bpyn==='1'?'是':'否'}}</span>
                </div>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </div>
    </div>
    <div class="empty" v-if="$store.state.showEmpty">暂无数据</div>
    <van-loading v-if="$store.state.showLoading" type="spinner"
                 size="64" color="#1989fa" vertical>加载中...
    </van-loading>
  </div>
</template>
<script lang="ts">
  import Vue from "vue";
  import {Component} from "vue-property-decorator";
  import Input from "@/components/Input.vue";
  import dayjs from "dayjs";
  import {axios} from "@/helper/axios";
  import {copy} from "@/helper/copy";
  import {Carddata, Details, InputValue, Items} from "@/type/type";
  import getItem from "@/helper/getItem";

  @Component({
    components: {Input}
  })
  export default class Item extends Vue {
    type = "#";
    goodsList: Details[] = [];
    input = "";
    activeNames = ["1"];

    get list() {
      return (input: string, code: string) => {
        const newGoodList: Details[] = [];
        this.goodsList.map((item: Details) => {
          let barcode = item.itemValue.barcode.indexOf(input);
          let nameUpperCase = item.itemValue.goodsname.toUpperCase().indexOf(input);
          let nameLowerCase = item.itemValue.goodsname.toLowerCase().indexOf(input);
          if (!input) {
            barcode = -1;
            nameUpperCase = -1;
            nameLowerCase = -1;
          }
          if (barcode >= 0 ||
            nameUpperCase >= 0 ||
            nameLowerCase >= 0 ||
            code === "#") {
            newGoodList.push(item);
          }
        });
        return newGoodList;
      };
    }

    onInput() {
      this.type = !this.input ? "#" : "";
    }

    onGo(res: string) {
      const current: Details = copy(this.goodsList.find((i: Details) => i.itemValue.barcode === res));
      const {pbillno, goodscode, asknum, stocknum, lastbuyprice, retailprice, pack, barcode, goodsname, spec} = current.itemValue;//pack发送请求时为spec1
      this.$router.push({
        path: "/detail",
        query: {pbillno, goodscode, asknum, stocknum, lastbuyprice, retailprice, pack, barcode, goodsname, spec}
      });
    }

    created() {
      this.goodsList.length = 0;
      this.$store.commit("getUser");
      this.$store.commit("showLoading", true);
      this.$store.commit("showEmpty", false);
      const now = dayjs(new Date());
      const startdate = now.format("YYYY-MM-DD 00:00:00");
      const enddate = now.format("YYYY-MM-DD HH:mm:ss");
      const data = {startdate, enddate, shopcode: "Z"};
      /////////////////////////////////////
      const now1 = dayjs(new Date()).format("YYYY-MM-DD");
      const value = dayjs(now1).valueOf();
      const local = getItem("supplyInput");
      if (local) {
        const parse = JSON.parse(local);
        const createdateArr = parse.map((i: Details) => i.itemValue.createdate);
        createdateArr.map((i: string) => {
          if (dayjs(i).valueOf() < value) {
            window.localStorage.removeItem("supplyInput");
          }
        });
      }
      ////////////////////////////////////////////////////////////////
      axios(data, "/sx/order/goods/shophz").then((res) => {
        const local = getItem("supplyInput");
        if (res.data.resultObj) {
          const data: Items[] = copy(res.data.resultObj.map((item: Carddata) => item.carddata));//[{},{},...]
          const detail: Details[] = data.map((i: Items) => ({
            itemValue: {...i},
            inputValue: {
              buyspec: "",
              buynum: "",
              buymoney: "",
              taxrate: "",
              buyprice: "",
              admprice: "",
              retailprice: "",
              kzprice: "",
              bpyn: ""
            }
          }));
          if (local) {
            const parse: Details[] = JSON.parse(local);
            for (let i = 0; i < parse.length; i++) {
              for (let j = 0; j < detail.length; j++)
                if (detail[j].itemValue.barcode === parse[i].itemValue.barcode) {
                  detail.splice(j, 1);
                }
            }
            this.goodsList.push(...parse, ...detail);
          } else {
            this.goodsList.push(...detail);
          }
        } else {
          this.$store.commit("showEmpty", true);
        }
      }, () => {this.$store.commit("showEmpty", true);}).catch(() => {
        this.$store.commit("showEmpty", true);
      });
    }

    onClickLeft() {
      this.$router.push("/nav");
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/style/item";
</style>